<style lang="less">
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .row-left{
    text-align: center;
    // border-right: 1px solid lightgray;
    // background-color: #eeeef7;
  }
  .title-top{
    margin-bottom:10px;
    color: #1C86EE;
    font-size: 1rem;
    border-bottom: 1px solid orangered;
    font-size: 20px;
    color: coral;
  }
  .content{
    background-color:white;
    height: auto;
    border: 1px solid lightgray;
    padding: 0px;
  }
  .idCard{
    width: 170px;
    height: 80px;
    background-color: #79e428;
    position: absolute;
    right: 2%;
    top: 13%;
    color: white;
    font-size: 1.5rem;
    line-height: 80px;
    text-align: center;
  }
  .ivu-steps-item {
    display: initial;
    position: relative;
    vertical-align: initial;
  }
  .step-item {
    float: left;
    margin-left: 0;
  }
  .red-name{
    color: red
  }
  .navi-title {
    height:30px;
    background-color:#f8f8f9;
    line-height:30px;
    padding-left: 15px;
    color: #5CACEE;
    font-size: 0.7rem;
    font-weight: bold;
  }
</style>
<template>
  <div style="background-color:white">
    <div style="">
      <Row class="title-top">
        <Col span="4" style="text-align: left;width:22%">特困人员身份确认申请登记</Col>
      </Row>
    </div>
    <div style="height:30px;">
      <Steps :current="2" style="margin-bottom:10px" size="small">
        <div @click="nextStep('0')" class="step-item">
          <Step title="申请人基本信息" content=""></Step>
        </div>
        <div @click="nextStep('1')" class="step-item">
          <Step title="申请人详细信息" content=""></Step>
        </div>
        <div @click="nextStep('2')" class="step-item">
          <Step title="基础收入" content=""></Step>
        </div>
        <div @click="nextStep('3')" class="step-item">
          <Step title="赡（抚、扶）养" content=""></Step>
        </div>
        <div @click="nextStep('4')" class="step-item">
          <Step title="基础财产" content=""></Step>
        </div>
        <div @click="nextStep('5')" class="step-item">
          <Step title="财产-房产" content=""></Step>
        </div>
        <div @click="nextStep('6')" class="step-item">
          <Step title="办理要件" content=""></Step>
        </div>
        <div @click="nextStep('7')" class="step-item">
          <Step title="申请受理" content=""></Step>
        </div>
      </Steps>
    </div>
    <div class="content">
      <div class="navi-title">
        基础收入信息
      </div>
      <div style="height:30px;margin-top:3px" ref="paramData">
        <Button type="info" class="step-item" style="margin-left:5px" size="small" @click="entry()">录入</Button>
        <Modal v-model="modal" title="录入基础收入" width="500" style="position:relative;">
          <Row class="item1">
            <Col span="9" style="text-align: center" class="red-name">收入方式:</Col>
            <Col span="10">
              <Select v-model="paramData.ssba0002">
                <Option :value="obj.key" v-for="obj in array" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="9" style="text-align: center" class="red-name">收入所属:</Col>
            <Col span="10">
              <Select v-model="paramData.ssba0001">
                <Option :value="obj.value" v-for="obj in data4.personTypeDict" v-bind:key="obj.value">{{obj.azcp0003}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="9" style="text-align: center" class="red-name">收入类别:</Col>
            <Col span="10">
              <Select v-model="paramData.ssba0003">
                <Option :value="obj.key" v-for="obj in data2.IncomeTypeDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="9" style="text-align: center" class="">土地类型:</Col>
            <Col span="10">
              <Select v-model="paramData.ssba0004" :disabled="paramData.ssba0003 !== '70'">
                <Option :value="obj.key" v-for="obj in data2.LandTypeDict" v-bind:key="obj.key">{{obj.value}}</Option>
              </Select>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="9" style="text-align: center" class="">土地亩数:</Col>
            <Col span="10">
              <Input v-model="paramData.ssba0005" placeholder="" :disabled="paramData.ssba0003 !== '70'"></Input>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="9" style="text-align: center" class="">一次性收入开始领取时间:</Col>
            <Col span="10">
              <DatePicker type="date" v-model="paramData.ssba0007" placeholder="Select date" style="width: 195px" :disabled="paramData.ssba0003 !== '60'"></DatePicker>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="9" style="text-align: center" class="">一次性收入计算月数:</Col>
            <Col span="10">
              <Input type="number" v-model="paramData.ssba0008" placeholder="" :disabled="paramData.ssba0003 !== '60'"></Input>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="9" style="text-align: center" class="">一次性收入结束领取时间:</Col>
            <Col span="10">
              <DatePicker type="date" v-model="paramData.ssba0009" placeholder="Select date" style="width: 195px" :disabled="paramData.ssba0003 !== '60'"></DatePicker>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="9" style="text-align: center" class="red-name">月收入金额:</Col>
            <Col span="10">
              <Input v-model="paramData.ssba0006" placeholder=""></Input>
            </Col>
          </Row>
          <div slot="footer">
            <Button type="text" size="large" @click="modal = false">取消</Button>
            <Button type="primary" size="large" @click="ok111(paramData)">确定</Button>
          </div>
        </Modal>
        <!-- <Button type="info" class="step-itemoption" style="margin-left:5px">查看</Button> -->
      </div>
      <div>
        <Table :columns="columns1" :data="data3"></Table>
        <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="data3.length" :current="1" @on-change="changePage"></Page>
        </div>
    </div>
      </div>
    </div>
    <div style="height:40px;line-height:40px;float:left;margin-top:10px;margin-left:40%">
      <Button type="info" @click="next()" :disabled="order_state == '0' || order_state == '1' || order_state == '2' || order_state == '3'" style="margin-right:5px">下一步></Button>
      <Button type="info" @click="nextPage()" v-if="order_state == '0' || order_state == '1' || order_state == '2' || order_state == '3'">下一页></Button>
    </div>
  </div>
</template>
<script>
import { getTKAppraising, date2str, iteminf, updateOrder } from '@/api/eventlist'
export default {
  data () {
    return {
      id: '',
      info: {},
      itemData: {},
      sq_id: '',
      family_idInfo: {},
      next_params: {},
      itemid: this.$route.params.itemid || '',
      income_url: '',
      info_url: '',
      add_url: '',
      update_url: '',
      delete_url: '',
      see: this.$route.params.see || false,
      code: this.$route.params.code,
      url: '',
      str: this.$route.params.serialNumber,
      idcardNumber: this.$route.params.idcardNumber,
      ss11001Id: this.$route.params.ss11001Id,
      ss11002Id: this.$route.params.ss11002Id,
      ss17001Id: this.$route.params.ss17001Id || '',
      ss17002Id: this.$route.params.ss17002Id || '',
      errorTitle: '保存错误',
      columns1: [
        {
          title: '收入所属',
          key: 'ssba0001',
          width: '85px'
        },
        {
          title: '收入方式',
          key: 'ssba0002',
          width: '85px'
        },
        {
          title: '收入类别',
          key: 'ssba0003',
          width: '85px'
        },
        {
          title: '土地类型',
          key: 'ssba0004',
          width: '85px'
        },
        {
          title: '土地亩数',
          key: 'ssba0005',
          width: '85px'
        },
        {
          title: '一次性收入结束领取时间',
          key: 'ssba0007',
          width: '170px'
        },
        {
          title: '一次性收入计算月数',
          key: 'ssba0008',
          width: '150px'
        },
        {
          title: '一次性收入结束领取时间',
          key: 'ssba0009',
          width: '170px'
        },
        {
          title: '月收入金额',
          key: 'ssba0006',
          width: '100px'
        },
        {
          title: '操作',
          key: 'cardno',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.index)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deletePeople(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      array: [
        { value: '个人', key: '2' }
      ],
      paramData: {
        ssba0001: '',
        ssba0002: '',
        ssba0003: '',
        ssba0004: '',
        ssba0005: '',
        ssba0006: '0.00',
        ssba0007: '',
        ssba0008: 0,
        ssba0009: '',
        ss11003Id: this.$route.params.uuid
      },
      data1: [],
      data2: [],
      data3: [],
      data4: {
        personTypeDict: []
      },
      modal: false,
      form_params: {
        ss11001Data: {},
        ss11002Data: {},
        ss11003Data: [],
        ss11005Data: [],
        ss11006Data: [],
        ss11007Data: [],
        ss11010Data: [],
        ss12002Data: {}
      },
      receive_arr: [],
      order_state: this.$route.params.order_state
    }
  },
  methods: {
    nextStep (step) {
      if (step === '0') {
        this.$router.push({
          name: 'tk_subsistenceapplication',
          params: this.next_params
        })
      } else if (step === '1') {
        this.$router.push({
          name: 'tk_subsistenceapplication1',
          params: this.next_params
        })
      } else if (step === '3') {
        this.$router.push({
          name: 'tk_supportlist',
          params: this.next_params
        })
      } else if (step === '4') {
        this.$router.push({
          name: 'tk_basicproperty',
          params: this.next_params
        })
      } else if (step === '5') {
        this.$router.push({
          name: 'tk_houseproperty',
          params: this.next_params
        })
      } else if (step === '6') {
        this.$router.push({
          name: 'tk_nearfamily',
          params: this.next_params
        })
      } else if (step === '7') {
        const content = '<p>请先上传要件</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
      }
    },
    nextPage () {
      this.$router.push({
        name: 'tk_supportlist',
        params: this.next_params
      })
    },
    getInfo (index, type, land_type) {
      console.log(index, type, land_type)
      var param = {
        'idcardNumber': this.idcardNumber,
        'dictsCode': 'ss11003',
        'serialNumber': this.str
      }
      getTKAppraising(param).then(res => {
        this.data2 = res.data.data.data
        for (var i in this.data2.IncomeTypeDict) {
          if (this.data2.IncomeTypeDict[i].key === type) {
            this.data3[index].ssba0003 = this.data2.IncomeTypeDict[i].value
          }
        }
        if (land_type) {
          for (var j in this.data2.LandTypeDict) {
            if (this.data2.LandTypeDict[j].key === land_type) {
              this.data3[index].ssba0004 = this.data2.LandTypeDict[j].value
            }
          }
        }
      })
    },
    // 保存录入信息
    ok111 (item1) {
      this.paramData.ssba0007 = date2str(this.paramData.ssba0007)
      this.paramData.ssba0009 = date2str(this.paramData.ssba0009)
      this.paramData.ss11003Id = this.$route.params.uuid
      let param = {}
      if (this.paramData.ssba0002 === '' || this.paramData.ssba0002 === undefined) {
        const content = '<p>请选择收入方式</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.paramData.ssba0001 === '' || this.paramData.ssba0001 === undefined) {
        const content = '<p>请选择与收入所属</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.paramData.ssba0003 === '' || this.paramData.ssba0003 === undefined) {
        const content = '<p>请选择收入类别</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.paramData.ssba0006 === '' || this.paramData.ssba0006 === undefined) {
        const content = '<p>请填写月收入金额</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.id !== '') { // 编辑
        this.receive_arr[this.id] = this.paramData
        this.receive_arr[this.id].ss11003Id = this.$route.params.uuid
        this.data3 = JSON.parse(JSON.stringify(this.receive_arr))
        this.form_params.ss11003Data = this.receive_arr
        param = {
          item_id: this.$route.params.itemid,
          cardno: this.$route.params.cardno,
          form_params: this.form_params,
          code: this.$route.params.code
        }
      } else {
        this.receive_arr.push(this.paramData)
        this.data3 = JSON.parse(JSON.stringify(this.receive_arr))
        this.form_params.ss11003Data = this.receive_arr
        param = {
          item_id: this.$route.params.itemid,
          cardno: this.$route.params.cardno,
          form_params: this.form_params,
          code: this.$route.params.code
        }
      }
      updateOrder(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success(res.data.errmsg)
          for (var i = 0; i < this.data3.length; i++) {
            this.data3[i].ssba0001 = this.data4.personTypeDict[0].azcp0003
            this.data3[i].ssba0002 = '个人'
            this.getInfo(i, this.data3[i].ssba0003, this.data3[i].ssba0004)
          }
          this.modal = false
        } else {
          const content = '<p>' + res.data.errmsg + '</p>'
          this.$Modal.error({
            title: this.errorTitle,
            content: content
          })
        }
      })
    },
    edit (item1) {
      this.modal = true
      this.paramData = this.receive_arr[item1]
      console.log(this.paramData)
      console.log(this.data4)
      this.id = item1
    },
    deletePeople (item1) {
      this.data3.splice(item1, 1)
      this.receive_arr.splice(item1, 1)
      this.form_params.ss11003Data = JSON.parse(JSON.stringify(this.receive_arr))
      var param = {
        item_id: this.$route.params.itemid,
        cardno: this.$route.params.cardno,
        form_params: this.form_params,
        code: this.$route.params.code
      }
      updateOrder(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success(res.data.errmsg)
          for (var i = 0; i < this.data3.length; i++) {
            this.data3[i].ssba0001 = this.data4.personTypeDict[0].azcp0003
            console.log(this.data3[i], '打她')
            this.data3[i].ssba0002 = '个人'
            this.getInfo(i, this.data3[i].ssba0003, this.data3[i].ssba0004)
          }
          this.modal = false
        } else {
          const content = '<p>' + res.data.errmsg + '</p>'
          this.$Modal.error({
            title: this.errorTitle,
            content: content
          })
        }
      })
    },
    next () {
      console.log('下一步')
      this.$router.push({
        name: 'tk_supportlist',
        params: this.next_params
      })
    },
    changePage () {
      // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
      this.data3 = this.getIncomeList()
    },
    entry () { // 录入
      this.paramData = {
        ss11003Id: this.$route.params.uuid
      }
      this.id = ''
      this.modal = true
      // this.getInfo()
    }
  },
  mounted () {
    let param2 = {
      'cardno': this.$route.params.cardno,
      'id': this.$route.params.itemid,
      'code': this.$route.params.code,
      'params': '1'
    }
    // this.getuserinfo(param2.cardno)
    iteminf(param2).then(res => {
      if (res.data.data) {
        if (JSON.parse(res.data.data.form_params).ss11001Data) {
          this.form_params.ss11001Data = JSON.parse(res.data.data.form_params).ss11001Data
        }
        if ((JSON.parse(res.data.data.form_params)).ss11002Data) {
          this.form_params.ss11002Data = JSON.parse(res.data.data.form_params).ss11002Data
          this.data4.personTypeDict[0] = this.form_params.ss11002Data
          console.log(this.data4.personTypeDict[0], '@@@')
          this.data4.personTypeDict[0]['value'] = this.$route.params.uuid
          console.log(this.data4.personTypeDict[0]['value'], '收入所属1')
        }
        if (JSON.parse(res.data.data.form_params).ss11003Data) {
          this.form_params.ss11003Data = JSON.parse(res.data.data.form_params).ss11003Data
          this.receive_arr = JSON.parse(JSON.stringify(this.form_params.ss11003Data))
          this.data3 = JSON.parse(JSON.stringify(this.form_params.ss11003Data))
          console.log(this.receive_arr, '@@@@@@！！！！')
          console.log(this.data3, '!@!@!@!@!')
          for (var i = 0; i < this.data3.length; i++) {
            this.data3[i].ssba0001 = this.data4.personTypeDict[0].azcp0003
            this.data3[i].ssba0002 = '个人'
            this.getInfo(i, this.data3[i].ssba0003, this.data3[i].ssba0004)
          }
          console.log(this.data3, 'this.data3')
          console.log(this.receive_arr, 'this.receive_arr')
        }
        if (JSON.parse(res.data.data.form_params).ss11005Data) {
          this.form_params.ss11005Data = JSON.parse(res.data.data.form_params).ss11005Data
        }
        if (JSON.parse(res.data.data.form_params).ss11006Data) {
          this.form_params.ss11006Data = JSON.parse(res.data.data.form_params).ss11006Data
        }
        if (JSON.parse(res.data.data.form_params).ss11007Data) {
          this.form_params.ss11007Data = JSON.parse(res.data.data.form_params).ss11007Data
        }
        if (JSON.parse(res.data.data.form_params).ss11010Data) {
          this.form_params.ss11010Data = JSON.parse(res.data.data.form_params).ss11010Data
        }
        if (JSON.parse(res.data.data.form_params).ss12002Data) {
          this.form_params.ss12002Data = JSON.parse(res.data.data.form_params).ss12002Data
        }
      }
    })
    this.next_params = {
      serialNumber: this.$route.params.serialNumber,
      idcardNumber: this.$route.params.idcardNumber,
      uuid: this.$route.params.uuid,
      code: this.$route.params.code,
      cardno: this.$route.params.cardno,
      order_state: this.order_state,
      // see: this.see,
      itemid: this.itemid
    }
    this.getInfo()
  }
}
</script>
